<template>
  <div class="shell">
    <ul class="images" :style="{'left': i*- 100+ '%'}">
      <li class="img" v-for="item in list" :key="item.id" :style="{'background-image': item.pic}"></li>
    </ul>
    <ul class="min-images" ref="minImages">
      <li v-for="item in list" :key="item.id" :style="{'background-image': item.pic}" @click="select(item.id)" :class="i === item.id ? 'active':'min'"></li>
    </ul>
    <div class="button">
      <div class="button-left" @click="sub">&lt;</div>
      <div class="button-right" @click="add">&gt;</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Rotas',
  data () {
    return {
      i: 0,
      len: 3,
      // 定义一个计时器
      intervalId: null,
      // 设置背景图片必须用require请求的方式
      list: [
        {
          id: 0,
          pic: 'url(' + require('../assets/images/1.jpg') + ')'
        },
        {
          id: 1,
          pic: 'url(' + require('../assets/images/2.jpg') + ')'
        },
        {
          id: 2,
          pic: 'url(' + require('../assets/images/3.jpg') + ')'
        }
      ]
    }
  },
  mounted () {
    this.settime()
  },
  methods: {
    sub () {
      this.stop()
      if (this.i <= 0) {
        this.i = this.len - 1
      } else {
        this.i--
      }
      this.settime()
    },
    add () {
      this.stop()
      if (this.i >= this.len - 1) {
        this.i = 0
      } else {
        this.i++
      }
      this.settime()
    },
    select (index) {
      this.stop()
      this.i = index
      this.settime()
    },
    // 计时器函数
    settime () {
      this.intervalId = setInterval(() => {
        if (this.i >= this.len - 1) {
          this.i = 0
        } else {
          this.i++
        }
      }, 3000)
    },
    // 取消计时器
    stop () {
      clearInterval(this.intervalId)// 清除计时器
      this.intervalId = null// 设置为null
    }
  }
}
</script>

<style scoped>
.shell {
  width: 900px;
  height: 500px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  border: 10px #fff solid;
  box-shadow: 20px 30px 20px rgba(0, 0, 0, 0.5);
}

.images {
  width: 300%;
  height: 100%;
  display: flex;
  position: absolute;
  left: 0;
  /* 所有的属性都变化 */
  transition: 0.2s;
}

.img {
  width: 100%;
  background-size: cover;
}

.min-images {
  display: flex;
  /* 可以使每个元素之间和元素距离边距的距离都相等 */
  justify-content: space-evenly;
  position: absolute;
  bottom: 20px;
  width: 40%;
  z-index: 999;
  right: 10%;
}

.min {
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 50%;
  background-size: cover;
  border: 5px solid rgba(255, 255, 255, 0.5);
  /* 设置图片的起始位置 */
  background-position: -20px 0;
}

.active {
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 50%;
  background-size: cover;
  border: 5px solid rgba(160, 193, 255, 0.7);
  /* 设置图片的起始位置 */
  background-position: -20px 0;
}

.button {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  user-select: none;
}

.button-left,
.button-right {
  font-size: 50px;
  background-color: rgba(160, 193, 255, 0.7);
  padding: 0 20px;
  cursor: pointer;
  line-height: 500px;
}
</style>
